<template>
	<view class="viewbox auto p-top100 d-flex f-column a-center" :style="{'--color':color}">
		<image :src="$imgUrls(startUp.logo_img)" mode="aspectFill" class="logo"></image>
		<text class="title">{{startUp.title}}</text>
		
		
		<view class="Shop" v-if="bind_store">
			<image :src="$imgUrls(bind_store.logo)" mode="aspectFill" class="ShopLogo" v-if="bind_store.logo"></image>
			<view class="shopContent">
				<view class="row a-center">
					<text class="flex-1 ellipsis black size28">{{bind_store.name}}</text>
					<view class="changeBtn" @click="ToggleShop" 
					     v-if="bind_store_switch == 1">切换店铺</view>
				</view>
				<view class="d-flex a-center m-top6">
					<text class="color_ff2 h6 m-right20" v-if="bind_store.score">评分：{{bind_store.score}}</text>
					<text  class="color_33 h6" v-if="bind_store.sales">销量：{{bind_store.sales}}</text>
				</view>
				<view class="row a-center m-top10">
					<text class="flex-1 ellipsis black size28">{{bind_store.address}}</text>
					<text class="color_33 size26" v-if="bind_store.distance" 
					    @click.stop="Distance">{{bind_store.distance}}km</text>
				</view>
				
			</view>
		</view>
		
		<view class="login_btn bg33 flexac white size30 t-letter2" v-if="!agree" @click="Verify">一键授权</view>
		<button class="login_btn bg33 flexac white size30 t-letter2" open-type="getPhoneNumber"
			@getphonenumber="getPhoneNumber" v-else>一键授权</button>
		
		<view class="agreement"
		     :class="{'Active':agree}" v-if="agreementList.length">
			<view class="agress" @click.stop="agree = !agree">
				<view class="iconfont icon-xuanzhong white h6"></view>
			</view>
			<text class="black size26" @click.stop="agree = !agree">阅读并同意</text>
			<text class="color size26" v-for="item in agreementList" :key="item.id"
				@click.stop="toDetails(item.id)">{{item.title}}</text>
		</view>
		
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				agreementList: [],
				agree: false,
				headimg:'',
				nickName:'',
				Phone:'',
			    shopData:'',
			}
		},
		onLoad(opt) {
			if (!this.regInfo || !this.regInfo.agreement.length) this.agree = true
			if(this.regInfo.agreement.length) this.agreements()
			this.RandomList()
		},
		
		
		methods: {
			...mapMutations(['getUser']),
			
			async getPhoneNumber(e) {
				let result = e.detail;
				if (result.errMsg != 'getPhoneNumber:ok') return this.$Toast('未认证')
				const jscode = await this.getProvider();
				this.$showLoading('');
				this.$http.post({
					url: '/zzj_singleSaleApi/appletDecodePhone',
					data: {
						encryptedData: result.encryptedData,
						iv: result.iv,
						session_key: this.session_key,
						js_code:jscode
					}
				}).then(res => {
					this.$hideLoading();
					if (res.code != 200) return this.$Toast(res.msg);
					this.Phone = res.data;
					this.Login();
				})
			},
			
			
			
			async Login(){
				this.$showLoading('');
				const jscode = await this.getProvider();
				this.$http.post({
					url: '/zzj_singleSaleApi/appletLogin',
					data: {
						openid: this.openid,
						nickName: this.nickName,
						headimg: this.headimg,
						purePhoneNumber: this.Phone,
						share_v_id: this.share_v_id,
						js_code:jscode,
						bind_store_id:this.bind_store.shop_id
					}
				}).then(res => {
					this.$hideLoading();
					if (res.code != 200) return this.$Toast(res.msg);
					let obj = {
						vid: res.v_id,
						userInfo: res.userInfo
					}
					uni.setStorageSync('vid', res.v_id);
					this.getUser(obj);
					if(this.request.pid) this.bindRelation(res.v_id)
					this.maintainLog(res.v_id)
					this.$back()
				})
			},
			
			
			bindRelation(vid){ // 私域-绑定会员关系
				this.$http.post({
					url: '/PrivateSphereApi/bindPrivateRelation',
					data: {
						vid,
						pid: this.request.pid,
						way: this.request.w || 1
					}
				}).then(res=>{
					console.log(res)
				})
			},
			
			maintainLog(v_id){ // 维护口令使用记录
				let used_log_id = uni.getStorageSync('used_log_id')
				if(!used_log_id || used_log_id == 0) return
				this.$http.post({
					url: '/automaticTask/upDateUsedLog',
					data: {
						v_id,
						used_log_id
					}
				}).then(res=>{
					uni.removeStorageSync('used_log_id')
				})
			},
			
			getProvider() {
				return new Promise((resolve,reject)=>{
					uni.getProvider({
						service: 'oauth',
						success: (res) => {
							uni.login({
								provider: res.provider[0],
								success: (req) => {
					                resolve(req.code)
								}
							})
						}
					})
				})
			},
			
			
			agreements() {
				let agreeList = JSON.parse(JSON.stringify(this.regInfo.agreement));
				if (!agreeList.length) return;
				agreeList.forEach((item, index) => {
					if (index != agreeList.length - 1) {
						item.title = `《${item.title}》/`
					} else {
						item.title = `《${item.title}》/`
					}
				})
				this.agreementList = agreeList;
			},
			
			
			RandomList(){
				this.RandomArr(this.regInfo.imgList,'headimg');
				this.RandomArr(this.regInfo.nicknameList,'nickName');
			},
			RandomArr(array,name){
				let randomIndex = Math.floor(Math.random() * array.length);
				name == 'headimg'?this.headimg = array[randomIndex]:this.nickName = array[randomIndex];
			},
			
			Verify(){
				this.$Toast('未同意协议~')
			},
			
			toDetails(id){
				this.toUrl(`/otherPage/article/article?artId=${id}`)
			},
			ToggleShop(){
				this.toUrl(`/otherPage/custom/selectStore?sourceLogin=1`)
			},
			Distance(){
				if(!this.bind_store.latitude) return
				let obj = {
					s_latitude:this.bind_store.latitude,
					s_longitude:this.bind_store.longitude,
					name:this.bind_store.name,
					nameAdress:this.bind_store.address
				}
				this.$openLocation(obj);
			},
		},
		computed: {
			...mapState(['startUp', 'color', 'regInfo','session_key','openid','share_v_id','request','bind_store','bind_store_switch'])
		}
	}
</script>

<style lang="scss" scoped>
	// page{
	// 	background-color: #f8f8f8;
	// }
	.logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.title {
		color: #000;
		font-size: 32rpx;
		margin-top: 30rpx;
	}

	.login_btn {
		width: 500rpx;
		height: 80rpx;
		background-color: var(--color);
		margin-top: 80rpx;
		border-radius: 10rpx;
		border: none;
	}

	.agreement {
		width: 80%;
		display: flex;
		flex-wrap: wrap;
		line-height: 44rpx;
		margin-top: 40rpx;
		box-sizing: border-box;
	}

	.agress {
		width: 30rpx;
		height: 30rpx;
		border: 1px solid #DEDEDE;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 12rpx;
		margin-top: 6rpx;
	}
	.Active .agress{
		border: 1px solid var(--color);
		background-color: var(--color);
	}
	.Shop{
		width:100%;
		padding:20rpx;
		background-color: #f8f8f8;
		display: flex;
		align-items: center;
		margin-top:50rpx;
	}
	.ShopLogo{
		width:120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right:20rpx;
	}
	.shopContent{
		flex:1;
		display: flex;
		flex-direction: column;
	}
	.changeBtn{
		padding: 10rpx 14rpx;
		color:#fff;
		font-size:24rpx;
		background-color: var(--color);
		border-radius: 6rpx;
	}
</style>